<template>
  <div class="content_box">
    <div class="main-box">
      <p class="main-title">文件选择</p>
      <p class="main-text">注：如果没有您选择的文件，请选择上传文件</p>
      <el-form ref="updateForms">
        <el-form-item required label="上传文件" label-width="110px">
          <file-upload
            ref="uploadRef"
            :bailId="bailId"
            :disabled="false"
            :accept="'.pdf,.png'"
            :isAccept="false"
            :groupId="groupId"
            :limit="3"
            @update:file-list="handleUpdateFileList"
            @success="handleSuccess"
          />
          <el-button
            style="margin-left: 30px"
            size="mini"
            type="primary"
            @click="handleUpload"
            >上传文件</el-button
          >
        </el-form-item>
      </el-form>

      <el-table @selection-change="handleSelectionChange" v-loading="loading" size="1100" class="table_list" :data="tableData">
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="[fields.name]"
          label="文件类型"
        ></el-table-column>
        <el-table-column
          prop="url"
          label="缩略图"
        >
            <template #default="scope">
                <div v-if="scope.row.imagetype == 'pdf'">
                  <svg-icon name="pdf" color="red" width="80px" height="80px"></svg-icon>
                  <p></p>
                </div>
                <div v-if="scope.row.imagetype == 'png'" class="img">
                  <el-image style="width: 80px; height: 80px" :src="scope.row.url_new" fit="cover" :preview-src-list="[scope.row.url_new]"/>
                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="filename"
          label="文件名字 "
        />
        <el-table-column
          prop="filename_alias"
          label="文件别名"
          width="250"
        >
          <template #default="scope">
            <el-input placeholder="请输入别名" style="width:100%" @blur="changFilename(scope.row)" v-model="scope.row.filename_alias"/>
          </template>
        </el-table-column>
        
        <!-- <el-table-column
          label="操作"
          align="right"
          fixed="right"
        > -->
          <!-- <template #default="scope">
            <el-button size="mini" type="primary" @click="toSee"
              >删除</el-button
            >
          </template> -->
        <!-- </el-table-column> -->
      </el-table>

      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button
          :loading="loading"
          :disabled="loading"
          type="primary"
          @click="submit"
        >
          确认选择
        </el-button>
      </div>
    </div>
  </div>
</template>
  <script setup lang="ts">
import {
  reactive,
  ref,
  computed,
  defineProps,
  defineEmits,
  onMounted,
} from "vue";
import { ElNotification,ElMessage } from "element-plus";
import { setBindAtt } from "@/api/public";
import { updateBailDate, applyBailDelay } from "@/api/bond/pay";
import { getAttachment,getBindAtt,saveFileAlias } from "@/api/public";
const props = defineProps({
  bailId: {
    type: Number,
  },
  id: {
    type: Number,
  },
  groupId: {
    type: Number,
  },
});


const emit = defineEmits(["closeDrawer",'submitFile']);

onMounted(() => {
  getQuBaoFile()
});

const changFilename = async(row: any)=>{
  console.log(row)
  let data = {
    attachment_id:row.attachment_id,
    filename_alias:row.filename_alias
  }
  console.log(data)
  await saveFileAlias(data).then(res=>{
    if (res.code == 1) {
      ElNotification({ message:'已修改', type: "success" });
    }else{
      ElMessage.error(res.msg);
    }
  })
}

// 上传
const uploadRef = ref(null);
const handleUpload = () => {
  uploadRef.value.submitUpload();
};

// 上传成功
const handleSuccess = (response: any) => {
  console.log("Upload successful:", response);
  getQuBaoFile()
};

const handleUpdateFileList = (newList: any) => {
  console.log("Updated file list:", newList);
};

// 获取上传决定文书
let tableData = ref([])
const getQuBaoFile = async () => {
  loading.value = true;

  try {
    await getAttachment({bail_id: props.bailId}).then(res=>{
      if (res.code == 1) {
        setTimeout(()=>{
          loading.value = false
        },500)
        tableData.value = res.data
        res.data.map((item: {url_new: any; url: any; })=>{
          item.url_new = import.meta.env.VITE_APP_file_API+item.url
        })
      }else{
        loading.value = false
      }
    })
  } catch (error) {
    loading.value = false
  }
  // await getBindAtt({ bail_id: props.bailId, group_id:props.groupId }).then((res) => {
  //   if (res.code == 1) {
  //     setTimeout(()=>{
  //       loading.value = false
  //     },500)
  //     res.data.attachment.map((item) => {
  //       if(item.includes('.pdf') || item.includes('.doc')){
  //         tableData.value.push({
  //           url:import.meta.env.VITE_APP_file_API+item,
  //           type:'pdf',
  //           name:'11'
  //         })
  //       }
  //       if(item.includes('.png')){
  //         tableData.value.push({
  //           url:import.meta.env.VITE_APP_file_API+item,
  //           type:'png',
  //           name:'11'
  //         })
  //       }
  //     });
  //   }else{
  //     loading.value = false
  //   }
  // });
};

// 勾选选择的文件
let changeArr = ref([])
const handleSelectionChange = (val: any) => {
  changeArr.value = val
}

/*=====提交=====*/
let loading = ref(false);

const submit = async () => {
  loading.value = true
  let arr: any[] = []
  changeArr.value.map(item=>{
    arr.push(item.attachment_id)
  })
  let data = {
    bail_id: props.bailId,
    group_id: props.groupId,
    attachment: arr.join(","),
  };
  console.log(data)
  setBindAtt(data).then((res) => {
    if (res.code == 1) {
      emit("submitFile",changeArr.value);
      loading.value = false
    } else {
      ElMessage.error(res.msg);
      loading.value = false
    }
  });
  
};

// 关闭
const close = () => {
  loading.value = false;
  emit("closeDrawer");
};
</script>
  <style scoped lang="scss">
.dialog-footer {
  margin-top: 50px;
  text-align: center;
}
.main-box {
  min-height: auto;
}
.main-title {
}
.main-text {
  margin: 20px 0 47px 0;
  font-size: 14px;
  color: #323c4f;
}
</style>
    